<template>
  <div>
    <el-card>
      <div class="toolbar">
        <!-- 关键字查询输入框 -->
        <el-input v-model="q.keyword" placeholder="关键字" size="small" style="width:220px" />
        <!-- 查询按钮 -->
        <el-button type="primary" size="small" @click="load">查询</el-button>
        <!-- 新增按钮 -->
        <el-button type="primary" size="small" @click="openEdit()">新增</el-button>
        <!-- 批量删除按钮 -->
        <el-button size="small" @click="removeBatch" :disabled="!selection.length">批量删除</el-button>
      </div>
      <el-table :data="list" @selection-change="selection=$event" border>
        <el-table-column type="selection" width="50" />
        <#list columns as c>
        <el-table-column prop="${c.fieldName}" label="${c.columnName}" min-width="120" />
        </#list>
        <el-table-column fixed="right" width="150" label="操作">
          <template #default="{row}">
            <!-- 编辑按钮 -->
            <el-button link size="small" @click="openEdit(row)">编辑</el-button>
            <!-- 删除按钮 -->
            <el-button link type="danger" size="small" @click="remove(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="visible" :title="model.id?'编辑':'新增'">
      <!-- 编辑表单 -->
      <el-form :model="model" label-width="90px">
        <#list columns as c>
        <el-form-item label="${c.columnName}">
          <el-input v-model="model.${c.fieldName}" />
        </el-form-item>
        </#list>
      </el-form>
      <template #footer>
        <!-- 弹窗底部按钮 -->
        <el-button @click="visible=false">取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
// 引入对应模块 API
import api from '@/api/generated/${lowerName}'
// 查询参数
const q = reactive({ keyword: '' })
// 列表数据
const list = ref<any[]>([])
// 弹窗可见性
const visible = ref(false)
// 表单模型
const model = reactive<any>({})
// 表格多选
const selection = ref<any[]>([])
// 加载列表（可扩展分页/查询条件）
function load(){ api.page(q).then((res:any)=>{ list.value = res.data?.data || res.data || [] }) }
// 打开编辑弹窗
function openEdit(row?:any){ Object.assign(model, row||{ id:null }); visible.value=true }
// 提交保存（根据是否存在 id 切换新增/更新）
function submit(){ const fn=model.id?api.update:api.create; fn(model).then(()=>{visible.value=false; load()}) }
// 删除单条
function remove(row:any){ api.remove(row.id).then(load) }
// 批量删除
function removeBatch(){ api.removeBatch(selection.value.map((s:any)=>s.id)).then(load) }
onMounted(load)
</script>

<style scoped>
.toolbar{ display:flex; gap:8px; margin-bottom:8px }
</style>


